<!-- 发票详情 -->
<template>
    <page-header-wrapper @back="() => $router.go(-1)">
        <a-card :bordered="false">
            <a-steps direction="horizontal" :current="invoice.state - 1" progressDot>
                <a-step title="申请开票">
                    <template v-slot:description>
                        <div class="antd-pro-pages-profile-advanced-style-stepDescription">
                            <div>{{invoice.billingTime}}</div>
                        </div>
                    </template>
                </a-step>
                <a-step title="审核通过" v-if="invoice.state != 9 && invoice.state != 8">
                    <template v-slot:description>
                        <div class="antd-pro-pages-profile-advanced-style-stepDescription">
                            <div>{{invoice.examineTime}}</div>
                        </div>
                    </template>
                </a-step>
                <a-step title="已开票" v-if="invoice.state != 9 && invoice.state != 8">
                    <template v-slot:description>
                        <div class="antd-pro-pages-profile-advanced-style-stepDescription">
                            <div>{{invoice.billingTime}}</div>
                        </div>
                    </template>
                </a-step>
                <a-step title="已邮寄" v-if="invoice.state != 9 && invoice.state != 8">
                    <template v-slot:description>
                        <div class="antd-pro-pages-profile-advanced-style-stepDescription">
                            <div>{{invoice.postTime}}</div>
                        </div>
                    </template>
                </a-step>
                <a-step title="已取消" v-if="invoice.state == 9">
                    <template v-slot:description >
                        <div class="antd-pro-pages-profile-advanced-style-stepDescription">
                            <div>{{invoice.updateTime}}</div>
                        </div>
                    </template>
                </a-step>
                <a-step title="已拒绝" v-if="invoice.state == 8">
                    <template v-slot:description >
                        <div class="antd-pro-pages-profile-advanced-style-stepDescription">
                            <div>{{invoice.updateTime}}</div>
                        </div>
                    </template>
                </a-step>
            </a-steps>

            <a-card style="margin-top: 24px" :bordered="false" title="发票信息">
                <a-descriptions size="small">
                    <a-descriptions-item label="发票抬头">{{invoice.receiptTitle}}</a-descriptions-item>
                    <a-descriptions-item label="基本开户银行" span="2">{{invoice.channel}}</a-descriptions-item>
                    <!-- <a-descriptions-item ></a-descriptions-item> -->
                    <a-descriptions-item label="发票类型">{{invoice.receiptType == 1 ?  '增值税普通发票' : '增值税专用发票'}}</a-descriptions-item>
                    <a-descriptions-item label="基本开户账号">{{invoice.bankAccount}}</a-descriptions-item>
                    <a-descriptions-item ></a-descriptions-item>
                    <a-descriptions-item label="纳税人识别号">{{!invoice.identificationNum || invoice.identificationNum == '' ? '-' : invoice.identificationNum}}</a-descriptions-item>
                    <a-descriptions-item label="企业注册地址">{{!invoice.companyRegisterAddress || invoice.companyRegisterAddress == '' ? '-' : invoice.companyRegisterAddress}}</a-descriptions-item>
                    <a-descriptions-item ></a-descriptions-item>
                    <a-descriptions-item label="税务登记固定电话">{{!invoice.taxRegisterTel || invoice.taxRegisterTel == '' ? '-' : invoice.taxRegisterTel}}</a-descriptions-item>
                    <a-descriptions-item label="备注" span="2">{{invoice.remark}}</a-descriptions-item>
                </a-descriptions>
                <a-divider/>
                <a-descriptions size="small">
                    <a-descriptions-item label="发票金额"><span style="color: orange">{{invoice.amount}}</span></a-descriptions-item>
                    <a-descriptions-item label="发票状态"><span style="color: orange">{{invoice.state | invoiceStateFilter}}</span></a-descriptions-item>
                    <a-descriptions-item ></a-descriptions-item>
                    <a-descriptions-item label="开票内容">{{invoice.receiptName}}</a-descriptions-item>
                    <a-descriptions-item label="邮寄地址" span="2">{{invoice.postAddress}}，{{invoice.postUserName}}，{{invoice.postPhone}}</a-descriptions-item>
                    <a-descriptions-item label="拒绝原因" span="3" v-if="invoice.state == 8">{{invoice.refuseReason}}</a-descriptions-item>
                    <a-descriptions-item label="发票查询码" v-if="invoice.state == 3 || invoice.state == 4">{{invoice.queryCode}}</a-descriptions-item>
                    <a-descriptions-item label="发票快照" span="2" v-if="invoice.state == 3 || invoice.state == 4">{{invoice.receiptUrl}} <a style="margin-left: 20px" href="javascript:void(0)" @click="openUrl">查看</a></a-descriptions-item>
                    <a-descriptions-item label="邮寄信息" span="3" v-if="invoice.state == 4">{{invoice.postCompany}}，{{invoice.postNumber}}</a-descriptions-item>
                </a-descriptions>
            </a-card>

            <a-card style="margin-top: 24px" :bordered="false" title="关联结算信息">
                <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList"  size="small">
                    <div slot="operation" slot-scope="text,record">
                        <div>{{parseFloat(record.successAmount) + parseFloat(record.successServiceAmount)}}</div>
                    </div>
                </a-table>
            </a-card>

            <div style="margin-top: 20px" class="flex flexCenter">
                <a-button v-if="invoice.state == 1" type='primary' size="large" @click="cancels"><span style="padding: 0 50px">撤销</span></a-button>
            </div>
        </a-card>
    </page-header-wrapper>
</template>

<script>
import { columns } from './table';
import { getReceiptDetail , getReceiptRelationSettlementList } from '@/api/services/invoice';
import { cancelReceipt } from '@/api/companys/invoice';
export default {
    data () {
        return {
            isload: false,
            columns,
            dataList: [],
            invoice: {
                id: '',
                state: 1,
            },
            receiptId: '',
        };
    },
    created(){
        this.receiptId = this.$route.query.receiptId;
        this.getData();
        this.getDetail();
    },
    methods: {
        // 获取账户列表数据
        getData(){
            let _this = this;
            _this.isload = true;
            getReceiptRelationSettlementList(_this.receiptId)
            .then(res => {
                _this.isload = false;
                if(res.success){
                    _this.dataList = res.data;
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
        // 获取发票详情信息
        getDetail(){
            let _this = this;
            getReceiptDetail(_this.receiptId)
            .then(res => {
                if(res.success){
                    _this.invoice = res.data;
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
        // 撤销发票申请
        cancels(){
            let _this = this;
            _this.$confirm({
                title: '温馨提示',
                content: '撤销后，供应商将不再处理该发票申请，请谨慎操作；',
                onOk() {
                    cancelReceipt(_this.receiptId)
                    .then(res => {
                        if(res.success){
                            _this.$notification['success']({
                                message: '温馨提示',
                                description: '操作成功',
                                duration: 8
                            })
                            _this.$router.go(-1);
                        }else{
                            _this.$notification['error']({
                                message: '温馨提示',
                                description: res.errMessage,
                                duration: 8
                            })
                        }
                    })
                },
                onCancel() {},
            });
        },
        // 查看发票快照
        openUrl(){
            window.open(this.invoice.receiptUrl);
        },
    }
}

</script>
<style scoped>

</style>